import { reactive } from "vue";
/**
 * @description 地图
 */
export const useChinaMap = () => {
  const option = reactive({
    backgroundColor: "#54daff", //地图背景色
    tooltip: {
      trigger: "item", // 触发类型为item
      formatter: "{b}:{c}", // 自定义提示信息格式，{b}为区域名，{c}为系列名（可空），{d}为数据值
    },
    series: [
      {
        roam: false, //是否允许缩放
        name: "",
        type: "map",
        zoom: 1.2,
        // aspectScale: 1.3, //y轴翻转比例
        map: "china",
        layoutCenter: ["50%", "30%"],
        selectedMode: 'single', // 可选'single'或'multiple'，表示单选或多选
        silent: true,        // 禁止用户交互（可选）
        itemStyle: {
          // 基础样式
          normal: {
            borderColor: "#666", //区域边框颜色
            areaColor: "#fff", //区域颜色
          },
          // 悬浮样式
          emphasis: {
            borderColor: "#FFD1A3",
            areaColor: "rgba(102,105,240,.3)",
            borderWidth: 1
          },
        },
        // 选中状态样式
        select: {
          itemStyle: {
            areaColor: "#FFA500", // 选中区域颜色
            borderColor: "#FF6347", // 选中边框颜色
            borderWidth: 2
          },
          label: {
            show: true,
            color: "#000", // 选中标签颜色
            fontWeight: "700"
          }
        },
        data: [{ 
          name: "北京市", 
          // 也可以为单个数据项设置特定的选中样式
          selected: true, // 初始是否选中
          itemStyle: {
            // 单独设置该区域的样式
          }
        }],
      },
    ],
  });
  return {
    option,
  };
};
